<template>
  <v-chart :option="option" style="height: 200px; width: 100%"></v-chart>
</template>
<script>
import "echarts-wordcloud";
import { getKeywordData } from "../../api";
export default {
  data() {
    return {
      option: {},
    };
  },
  methods: {
    renderCchart(data) {
      this.option = {
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud",
            shape: "circle",
            emphasis:{
                focus:'self'
            },
            textStyle: {
              fontFamily: "Arial",
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            data,
          },
        ],
      };
    },
  },
  async mounted() {
    const { data } = await getKeywordData();
    let keywordArr = [];
    for (let i = 0; i < data.length; i++) {
      keywordArr.push({
        name: data[i].keyWord,
        value: data[i].totalSearch,
      });
    }

    console.log(keywordArr);
    this.renderCchart(keywordArr);
  },
};
</script>
<style scoped></style>
